<!--
    根据传入的columns数组进行不同方式的显示处理过或未处理过的list数组item的数据
    columns数组的基本格式:
    (title为表头标题,type='custom'指非简单数据的显示,显示的是slot=key值的内容)
    columns = [
        {
            key: 'a', //单元格内数据显示item.a
            title: 'A' //表头标题
        },
        {
            key: 'b', //单元格内数据显示slot='b'的内容
            title: 'B',
            type: 'custom' //单元格内容需要特殊处理的标志
            hasClassTdFlag: 需要显示class名字的td加上 list 子类中的 hasClassName true
        },
        {
            key: 'd.a.a', //单元格内数据显示item.d.a.a
            title: 'D'
        },
        {
            key: '__action', //操作列单元格显示slot='action'的内容
            title: '操作'
        }
    ]
-->
<template>
    <!-- <div class="row-rotate">
        <div class="un-row-rotate"> -->
            <div class="public-table-component" style="position:relative;">
                <div class="t-table-top" v-if="tableTop">
                    <div class="t-table-top-text">
                        <slot name="topText"></slot>
                    </div>
                    <div class="t-table-top-btn">
                        <slot name="topButton"></slot>
                    </div>
                </div>
                <div :class="{'t-fix-table-wrap':height>0}">
                    <div class="t-fix-title-wrap t-table-box" v-if="height>0">
                        <table class="t-table">
                            <thead class="t-fix-title-height">
                            <tr class="t-table-title">
                                <th v-for="(column, index) in columns" :key="index" :class="{'t-all-check':column.title == 'checkAll'}">
                                    <!--todo title为checkAll时加入复选框样式-->
                                    <template v-if="column.type == 'titleEdit'">
                                        <slot :name="column.title"></slot>
                                    </template>
                                    <template v-else>
                                        {{ column.title }}
                                    </template>
                                </th>
                            </tr>
                            </thead>
                            <tbody v-if="!loading">
                            <tr v-for="(item, itemIndex) in list" :key="itemIndex" class="t-table-tr">
                                <td v-for="(column, columnIndex) in columns" :key="columnIndex">
                                    <!--操作部分的内容显示,columns的key值为'__action'-->
                                    <template v-if="column.key == '__action'">
                                        <slot name="action" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <!--需要对数据进行特殊处理的内容,columns的type值为'custom'-->
                                    <template v-else-if="column.type == 'custom'">
                                        <slot :name="column.key" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <template v-else-if="column.type == 'titleEdit'">
                                        <slot :name="column.key" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <!--单元格内数据显示直接是item[key]的值-->
                                    <template v-else>
                                        {{ getObjectValue(item, column.key) }}
                                    </template>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="t-table-box" :class="{'t-fix-content-wrap':height>0}">
                        <table class="t-table">
                            <thead>
                            <tr class="t-table-title">
                                <th v-for="(column, index) in columns" :key="index" :class="{'t-all-check':column.title == 'checkAll', [column.selfClass]: column.selfClass}">
                                    <!--todo title为checkAll时加入复选框样式-->
                                    <template v-if="column.type == 'titleEdit'">
                                        <slot :name="column.title"></slot>
                                    </template>
                                    <template v-else>
                                        {{ column.title }}
                                    </template>
                                </th>
                            </tr>
                            </thead>
                            <tbody v-if="!loading">
                            <tr v-for="(item, itemIndex) in list" v-if="item" :key="itemIndex" class="t-table-tr">
                                <td v-for="(column, columnIndex) in columns" :key="columnIndex" :class="{[column.selfClassTb]: column.selfClassTb, [item && item.hasClassName]: column.hasClassTdFlag}">
                                    <!--操作部分的内容显示,columns的key值为'__action'-->
                                    <template v-if="column.key == '__action'">
                                        <slot name="action" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <!--需要对数据进行特殊处理的内容,columns的type值为'custom'-->
                                    <template v-else-if="column.type == 'custom'">
                                        <slot :name="column.key" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <template v-else-if="column.type == 'titleEdit'">
                                        <slot :name="column.key" :item="item" :index="itemIndex"></slot>
                                    </template>

                                    <!--单元格内数据显示直接是item[key]的值-->
                                    <template v-else>
                                        {{ getObjectValue(item, column.key) }}
                                    </template>
                                </td>
                            </tr>
                            <slot name="totalNum"></slot>

                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="t-no-data" v-if="list.length==0 && !loading">
                    <!-- <img :src="img" width="100" alt=""> -->
                    <p>{{ $t('components.tableBox.noneData') }}</p>
                </div>
            </div>
        <!-- </div> -->
    <!-- </div> -->
</template>

<script>
import CircleSpin from '../LoadingSpin/CircleSpin.vue';
import '@/css/components/public-table.scss';
export default {
  name: 'vue-table',
  props: {
    columns: {
      type: Array,
      required: true
    },
    // 数值且有默认值
    list: {
      type: Array | Object,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: true
    },
    tableTop: {
      type: Boolean,
      default: false
    },
    // 传入高度时固定表头
    height: {
      type: Number,
      default: 0
    }
  },
  components: {
    CircleSpin
  },
  data () {
    return {
      img: '',
      titleHeight: 0
    }
  },
  watch: {
    titleHeight: function (val) {
      document.getElementsByClassName('t-fix-title-wrap')[0].style.height = this.titleHeight + 'px'
    }
  },
  mounted () {
    if (this.height > 0) {
      document.getElementsByClassName('t-fix-table-wrap')[0].style.height = this.height + 'px'
      document.getElementsByClassName('t-fix-content-wrap')[0].style.height = this.height + 'px'
      this.titleHeight = document.getElementsByClassName('t-fix-title-height')[0].clientHeight
    }
  },
  methods: {
    getObjectValue: function (object, path) {
      let obj = object
      if (path && path.trim() !== '') {
        let keys = path.split('.')
        keys.forEach(function (key) {
          if (obj !== null && typeof obj[key] !== 'undefined' && obj[key] !== null) {
            obj = obj[key]
          } else {
            obj= ''
          }
        })
      }
      return obj
    }
  }
}
</script>

<style scoped>
  /**{*/
    /*white-space:nowrap;*/

  /*}*/
    .t-table-top{
        /*margin:2px 2px 0;*/
        padding:12px 10px;
        /*background:#efefef;*/
        display: flex;
        align-items: center;
        border:1px solid #ccc;
    }
    .t-table-top .t-table-top-btn{
        padding-left:40px;
    }
    .t-table{
        /*width:100%;*/
        text-align: center;
    }
    .t-table-title{
        background:#929fac;
        color:#fff;
    }
    .t-table td, .t-table th{
        padding:8px;
        /* white-space:nowrap; */
        white-space: normal;
        word-break: break-word;
        min-width: 120px;
    }
    .t-table-tr:nth-of-type(2n){
        background:#efefef;
        transition:.3s;
    }
    .t-table-tr:nth-of-type(2n-1){
        background:#fafafa;
        transition:.3s;
    }
    .t-table-tr:hover{
        background: #d0dadf;
    }
    .t-fix-table-wrap{
        position:relative;
        overflow: auto;
    }
    .t-fix-title-wrap{
        position:absolute;top:0;left:0;right:0;
        background:#fff;
        margin-right:6px;
        z-index:1;
        overflow: hidden;
    }
    .t-fix-content-wrap{
        position:absolute;
        top:0;left:0;right:0;
        overflow:auto;
    }
    ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background: #f5f5f5;
    }
    ::-webkit-scrollbar-thumb {
        background-color: #bbb;
        border-radius: 3px;
    }

    /*列表顶部搜索栏公共样式*/
    .t-search-wrap{
        border:1px solid #ccc;
        padding:2px;
        margin-bottom:10px;
    }
    .t-search-wrap .t-search-title{
        margin:0;
        padding:6px 10px;
        background:#929fac;
        color:#fff;
    }
    /*修改iview按钮样式*/
    .t-search-wrap .ivu-btn-error, .t-table-top .ivu-btn-error{
        background-color: #d2534d;
        border-color: #d2534d;
    }
    .t-search-wrap .ivu-btn-success, .t-table-top .ivu-btn-success{
        background-color: #23b46b;
        border-color: #23b46b;
    }
    .t-search-wrap .ivu-btn-primary, .t-table-top .ivu-btn-primary{
        background-color: #599cd5;
        border-color: #599cd5;
    }
    .t-search-wrap .ivu-btn-error:hover, .t-table-top .ivu-btn-error:hover{
        background-color: #f2615a;
        border-color: #f2615a;
    }
    .t-search-wrap .ivu-btn-success:hover, .t-table-top .ivu-btn-success:hover{
        background-color: #24cb77;
        border-color: #24cb77;
    }
    .t-search-wrap .ivu-btn-primary:hover, .t-table-top .ivu-btn-primary:hover{
        background-color: #62a8e4;
        border-color: #62a8e4;
    }
    .t-search-wrap button, .t-table-top button{
        margin:0 4px;
    }
    .t-search-wrap button:last-of-type, .t-table-top button:last-of-type{
        margin-right:0;
    }
    .t-search-wrap .ivu-btn-small, .t-table-top .ivu-btn-small{
        padding: 2px 10px;
    }
    .t-no-data{
        text-align: center;
        padding:100px;
        font-size:16px;
    }
    .t-no-data p{
        padding:10px;
    }
    .t-table input[type=checkbox]{
        -webkit-appearance:none;
        width:16px;height:16px;
        margin:-3px;
        background:#929fac;
        border-radius:50%;
        /*outline: none;*/
        margin-right:4px;margin-left:4px;
    }
    .t-table input[type=checkbox]:checked::before{
        content: '';
        display: block;
        width:5px;height:10px;
        border-bottom:2px solid #fff;
        border-right:2px solid #fff;
        transform: translate(5px,2px) rotate(40deg);
    }
    .t-all-check input[type=checkbox]{
        background:#fff;
    }
    .t-all-check input[type=checkbox]:checked::before{
        border-color:#929fac
    }
    .t-table-tr img{
        width: auto;
        height: auto;
        max-width: 70px;
        max-height: 80px;
    }
    /* 全选按钮的宽度样式 */
    .t-table-title .select-all-th,
    .t-table-tr .select-all-tb {
        width: 70px;
        min-width: 70px;
    }

    /* @media screen and (min-width: 760px) {
        .row-rotate {
            transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
        }
        .un-row-rotate {
            transform: rotateX(180deg);
            -webkit-transform: rotateX(180deg);
        }
    } */
</style>
